<template>
  <div class="openOrder">
    <!-- 顶部查询表单 -->
    <div class="openOrderTop">
      <el-form
        ref="searchForm"
        :model="tableDomain.mainTable.queryParam"
        :rules="feeDialogRules"
        :inline="true"
        size="mini"
      >
        <el-form-item label="客户：" prop="customer">
          <el-select v-model="tableDomain.mainTable.queryParam.customer" filterable>
            <el-option
              v-for="(item, index) in dropDownList.customerList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="mini" @click="initMainTable">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主要表格 -->
    <div class="openOrderBox">
      <div class="openOrderLeft">
        <div class="openTitle">结算单列表</div>
        <!-- 按钮组 -->
        <div class="btn">
          <el-button size="mini" plain type="primary" @click="viewBtn">查看</el-button>
          <el-button size="mini" plain type="primary" @click="addBtn">新增</el-button>
          <el-button size="mini" plain type="primary" @click="editBtn">编辑</el-button>
          <el-button size="mini" plain type="primary" @click="delBtn">删除</el-button>
          <el-button size="mini" plain type="primary" @click="confirmPaymentBtn">付款确认</el-button>
          <el-button size="mini" plain type="primary" @click="cancelBtn">取消付款</el-button>
        </div>
        <!-- 结算单列表 表格 -->
        <div class="openLeftTableBox" style="width:100%;">
          <el-table
            :data="tableDomain.mainTable.data"
            border
            :header-cell-style="{ textAlign: 'center' }"
            highlight-current-row
            @row-click="mainTableRowClick"
            style="width:100%;height:500px;"
          >
            <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
            <el-table-column prop="billName" label="结算名称" show-overflow-tooltip sortable width="120"></el-table-column>
            <el-table-column prop="billNum" label="结算单号" show-overflow-tooltip sortable width="120"></el-table-column>
            <el-table-column prop="billStatus" label="状态" show-overflow-tooltip sortable width="120"></el-table-column>
            <el-table-column width="120px" prop="cltName" label="客户" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="billTotal" label="总金额" show-overflow-tooltip sortable width="120"></el-table-column>
            <el-table-column prop="chbLstupddt" label="输入时间" show-overflow-tooltip sortable width="120"></el-table-column>
            <el-table-column prop="chbLstupddt" label="输入员工" show-overflow-tooltip sortable width="120"></el-table-column>
            <el-table-column prop="chbLstupddt" label="最后修改时间" show-overflow-tooltip sortable width="150"></el-table-column>
            <el-table-column prop="chbLstupduser" label="最后修改员工" show-overflow-tooltip sortable width="150"></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            ref="pagination"
            small
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.PageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 结算单查看 dialog -->
    <el-dialog
      :title="dialogInfo.view.title"
      :visible.sync="dialogInfo.view.show"
      width="80%"
      @before-close="dialogBeforeClose('v')"
      :close-on-click-modal="false"
      v-el-drag-dialog
    >
      <div>
        <div>
          <el-form
            ref="dialogViewFrom"
            :data="fromDomain.dCustomerFrom.data"
            :rules="fromDomain.dCustomerFrom.rules"
            size="mini"
            label-position="right"
            label-width="80px"
            class="view-form"
          >
            <el-row class="dialog-row" style="margin-top:20px;">
              <el-col :span="8">
                <el-form-item size="mini" label="客户" prop="customerName">
                  <el-input
                    size="mini"
                    disabled
                    v-model="fromDomain.dCustomerFrom.data.customerName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item size="mini" label="结算单号" label-width="100px" prop="customerName">
                  <el-input
                    size="mini"
                    disabled
                    v-model="fromDomain.dCustomerFrom.data.customerName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item size="mini" label="结算单名称" label-width="100px" prop="customerName">
                  <el-input
                    size="mini"
                    disabled
                    v-model="fromDomain.dCustomerFrom.data.customerName"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="dialog-row">
              <el-col :span="8">
                <el-form-item size="mini" label="总结合计" prop="customerName">
                  <el-input
                    size="mini"
                    disabled
                    v-model="fromDomain.dCustomerFrom.data.customerName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item size="mini" label="税后费用合计" label-width="100px" prop="customerName">
                  <el-input
                    size="mini"
                    disabled
                    v-model="fromDomain.dCustomerFrom.data.customerName"
                  ></el-input>
                </el-form-item>
              </el-col>-->
              <el-col :span="24">
                <el-form-item label="备注:" prop="bidRemark">
                  <el-input disabled type="textarea" readonly="ture"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div>
          <div class="view-dialog-table-title">订单信息</div>
          <div class="view-dialog-table-view-btn">
            <el-button size="mini" plain type="primary" @click="excelExport">Excel导出</el-button>
          </div>
          <el-table>
            <el-table-column align="center" type="index" label="序号"></el-table-column>
            <el-table-column align="center" prop="demandCode" label="订单编号" width="150"></el-table-column>
            <el-table-column align="center" prop="kind" label="客户名称"></el-table-column>
            <el-table-column align="center" prop="site" label="货名"></el-table-column>
            <el-table-column align="center" prop="destination" label="发货地址"></el-table-column>
            <el-table-column align="center" prop="transportMode" label="收获地址"></el-table-column>
            <el-table-column align="center" prop="dailyOutput" label="结算方式"></el-table-column>
            <el-table-column align="center" prop="dailyOutput" label="结算类型"></el-table-column>
            <el-table-column align="center" prop="transportQuantity" label="费用信息">
              <el-table-column align="center" prop="transportQuantity" label="每/吨(价格)"></el-table-column>
              <el-table-column align="center" prop="transportQuantity" label="总重(吨)"></el-table-column>
              <el-table-column align="center" prop="transportQuantity" label="总费用"></el-table-column>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip prop="remark" label="应付统计"></el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" plain @click="dialogInfo.view.show = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 增删改查 dialog -->
    <div>
      <el-dialog
        :title="dialogInfo.info.title"
        :visible.sync="dialogInfo.info.show"
        width="80%"
        @before-close="dialogBeforeClose('i')"
        :close-on-click-modal="false"
        v-el-drag-dialog
      >
        <div>
          <!-- 客户信息 -->
          <div class="dialog-info-customer-info">
            <div class="dialog-info-customer-info-title">客户信息</div>
            <!-- 左边客户信息列表 -->
            <div class="dialog-info-order-left-form">
              <el-form
                ref="dialogInfoCustomerFrom"
                size="mini"
                label-position="right"
                label-width="120px"
              >
                <el-row>
                  <el-form-item label="起始时间：" size="mini">
                    <el-date-picker type="datetime" placeholder="选择起始时间"></el-date-picker>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="中止时间：" size="mini">
                    <el-date-picker type="datetime" placeholder="选择终止时间"></el-date-picker>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="客户：" size="mini">
                    <el-select style="width:100%;" filterable clearable placeholder="请选择">
                      <el-option
                        v-for="(index,item) in customerList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="订单结算方式：" prop="adcJsfhValue">
                    <el-select
                      clearable
                      style="width:48%"
                      :disabled="check || see"
                      @change="getPayMethodChange"
                    >
                      <el-option
                        v-for="(item,index) in payWay"
                        :key="index"
                        :label="item.rvCmeaning"
                        :value="item.rvLowValue"
                      ></el-option>
                    </el-select>
                    <el-select
                      clearable
                      style="width:48%;margin-left: 4%;"
                      :disabled="check || see"
                    >
                      <el-option
                        v-for="(item,index) in payTime"
                        :key="index"
                        :label="item.rvCmeaning"
                        :value="item.rvLowValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item>
                    <el-button type="primary" plain size="mini">查询</el-button>
                  </el-form-item>
                </el-row>
              </el-form>
            </div>
            <!-- 右边订单列表 -->
            <div class="dialog-info-order-right-table">
              <div>订单列表</div>
              <div>
                <el-table border>
                  <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                  <el-table-column align="center" type="selection"></el-table-column>
                  <el-table-column align="center" label="状态"></el-table-column>
                  <el-table-column align="center" label="订单编号"></el-table-column>
                  <el-table-column align="center" label="客户名称"></el-table-column>
                  <el-table-column align="center" label="货名"></el-table-column>
                  <el-table-column align="center" label="发货地址"></el-table-column>
                  <el-table-column align="center" label="收货地址"></el-table-column>
                  <el-table-column align="center" label="结算方式"></el-table-column>
                </el-table>
                <el-pagination
                  small
                  background
                  @size-change="infoDialogOrderTableSizeChange"
                  @current-change="infoDialogOrderTableIndexChange"
                  :current-page="tableDomain.orderTable.pageInfo.index"
                  :page-sizes="[10,20,30]"
                  :page-size="tableDomain.orderTable.pageInfo.size"
                  layout="sizes, prev, pager, next, jumper, total"
                  :total="tableDomain.orderTable.pageInfo.total"
                  style="margin-top:10px;margin-bottom:10px;"
                ></el-pagination>
              </div>
            </div>
          </div>
          <!-- 结算单信息 -->
          <div class="dialog-info-bottom">
            <div class="dialog-info-bottom-tittle">结算单信息</div>
            <div class="dialog-info-bottom-table-title">结算单列表</div>
            <div class="dialog-info-bottom-table-btn">
              <el-button type="primary" plain size="mini">添加</el-button>
              <el-button type="primary" plain size="mini">删除</el-button>
            </div>
            <el-table>
              <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
              <el-table-column align="center" type="selection"></el-table-column>
              <el-table-column align="center" prop="demandCode" label="订单编号" width="150"></el-table-column>
              <el-table-column align="center" prop="kind" label="客户名称"></el-table-column>
              <el-table-column align="center" prop="site" label="货名"></el-table-column>
              <el-table-column align="center" prop="destination" label="发货地址"></el-table-column>
              <el-table-column align="center" prop="transportMode" label="收获地址"></el-table-column>
              <el-table-column align="center" prop="dailyOutput" label="结算方式"></el-table-column>
              <el-table-column align="center" prop="dailyOutput" label="结算类型"></el-table-column>
              <el-table-column align="center" prop="transportQuantity" label="费用信息">
                <el-table-column align="center" prop="transportQuantity" label="每/吨(价格)"></el-table-column>
                <el-table-column align="center" prop="transportQuantity" label="总重(吨)"></el-table-column>
                <el-table-column align="center" prop="transportQuantity" label="总费用"></el-table-column>
              </el-table-column>
            </el-table>
            <div class="dialog-info-bottom-from">
              <el-form
                ref="dialogInfoFrom"
                :data="fromDomain.dCustomerFrom.data"
                :rules="fromDomain.dCustomerFrom.rules"
                size="mini"
                label-position="right"
                label-width="100px"
                class="info-formm"
              >
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="结算单名称：" size="mini">
                      <el-input size="mini" placeholder="格式如：某某客户2020年2月份营收结算单"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="总金额统计：" size="mini">
                      <el-input size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item size="mini">
                      <el-button type="primary" size="mini" plain>金额统计</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="备注" size="mini">
                      <el-input type="textarea" maxlength="200"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogInfo.info.show = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="infoDialogTBtn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import {} from '@/request/api'
export default {
  name: 'router.openOrderManage',
  mixins: [paginationMixin],
  data() {
    return {
      // 下拉框
      dropDownList: {
        payWayList: [], // 结算方式
        payTime: [], // 结算方式
        payPeopleDataList: [], // 结算对象
        customerList: [], // dialog 客户列表
        payStyleList: [], // dialog 结算方式
        supplyPeopleList: [], // dialog 用户
        getPayStatuList: [] // dialog 收支标志
      },
      tableDomain: {
        // 页面主表
        mainTable: {
          data: [],
          queryParam: {
            customer: ''
          },
          currentData: {}
        },
        orderTable: {
          data: [],
          selectList: [],
          pageInfo: {
            index: 1,
            size: 10,
            total: 0
          }
        },
        billTable: {
          data: [],
          selectList: []
        }
      },
      // dialog信息
      dialogInfo: {
        view: {
          show: false,
          title: ''
        },
        info: {
          show: false,
          title: ''
        }
      },
      // 表单对象
      fromDomain: {
        // dailog 客户信息表单
        dCustomerFrom: {
          data: [],
          rules: {}
        },
        // dialog 金额表单
        dMoneyFrom: {
          data: [],
          rules: {}
        }
      }
    }
  },
  mounted() {},
  methods: {
    // 初始化主表
    initMainTable() {},
    // 查看
    viewBtn() {
      // if (Object.keys(this.tableDomain.mainTable.currentData).length == 0) {
      //   this.$message.error('请选择一条数据')
      //   return
      // }
      this.dialogInfo.view.title = '查看'
      this.dialogInfo.view.show = true
    },
    // 添加
    addBtn() {
      this.dialogInfo.info.title = '添加'
      this.dialogInfo.info.show = true
    },
    // 修改
    editBtn() {
      this.dialogInfo.info.title = '修改'
      this.dialogInfo.info.show = true
    },
    // 删除
    delBtn() {},
    // 确认收款
    confirmPaymentBtn() {},
    // 取消收款
    cancelBtn() {},
    // excel导出
    excelExport() {},
    cleanDialogData(dialogName) {
      if (dialogName == 'v') {
        this.dialogInfo.view.show = false
      } else {
        this.dialogInfo.info.show = false
      }
      this.cleanDialogData(dialogName)
    },
    // 结算方式下拉框
    getPayMethodChange() {}
  }
}
</script>

<style lang="scss" scoped>
.openOrder {
  padding-left: 10px;
  padding-top: 10px;
  .openOrderBox {
    .openTitle {
      font-size: 13px;
    }
    .btn {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}

.view-form {
  border: 1px solid rgb(144, 144, 144);
  border-radius: 5px;
  padding: 0 20px;
  padding-left: 0;
}
.view-dialog-table-title {
  font-size: 13px;
  padding: 10px 0;
}
.view-dialog-table-view-btn {
  padding-bottom: 10px;
}

.dialog-info-customer-info {
  display: flex;
  flex-direction: row;
  border: 1px solid gray;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 10px;
  position: relative;
  .dialog-info-customer-info-title {
    position: absolute;
    top: -5%;
    left: 5px;
    background-color: white;
  }
  .dialog-info-order-left-form {
    width: 30%;
  }
  .dialog-info-order-right-table {
    width: 70%;
    padding-left: 20px;
  }
}

.dialog-info-bottom {
  border: 1px solid gray;
  border-radius: 5px;
  margin-top: 15px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  .dialog-info-bottom-tittle {
    position: absolute;
    top: -4%;
    left: 5px;
    background-color: white;
  }
  .dialog-info-bottom-table-title {
    font-size: 14px;
  }
  .dialog-info-bottom-from {
    padding-top: 10px;
  }
  .dialog-info-bottom-table-btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
</style>